<!--  -->
<template>
  <a-form v-if="headerShow" :model="form" layout="inline" size="mini">
    <a-form-item label="织布单号">
      <a-input allow-clear class="bacClass" v-model="form.planOrderCode" :style="{ width: '200px' }" />
    </a-form-item>
    <a-form-item label="客户订单号">
      <a-input allow-clear class="bacClass" v-model="form.customOrderNo" :style="{ width: '200px' }" />
    </a-form-item>
    <a-form-item label="客户">
      <a-input allow-clear class="bacClass" v-model="form.customName" :style="{ width: '200px' }" />
    </a-form-item>
  </a-form>
  <div class="my-divisders">
    <a-divider orientation="center">
      <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
      <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
    </a-divider>
  </div>
  <!-- '开需求单', -->
  <div style="text-align: end">
    <Toolbar v-if="tabIds == 1" :items="[`查询`, '新增']" @select="cx" @add="adds"> </Toolbar>
    <Toolbar v-if="tabIds == 2" :items="[`查询`]" @select="cx"> </Toolbar>
  </div>
  <div class="gang"></div>
  <div class="cssTable">
    <a-spin :loading="form.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
      <a-tabs :lazy-load="true" justify type="card" @change="tabChanges">
        <a-tab-pane :key="1" title="未处理">
          <div style="height: 100%">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
              rowSelection="multiple" @grid-ready="gridReady" :style="{
    height: pageData.rHeight - 262 + 'px',
  }" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="dataList" :columnDefs="tc"
              :localeText="localeText1"></AgGridVuesCopys>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="2" title="已处理">
          <div style="height: 100%">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
              rowSelection="multiple" @grid-ready="gridReady2" :style="{
    height: pageData.rHeight - 262 + 'px',
  }" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="dataList2" :columnDefs="tc2"
              :localeText="localeText1"></AgGridVuesCopys>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
  <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
    @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size" :current="page" />
  <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
    height="80%" :visible="pageData.showAdd" placement="bottom" unmountOnClose @ok="sideOk"
    @cancel="pageData.showAdd = false">
    <template #title>
      {{ pageData.sideTitle }}
    </template>
    <!-- <el-table :data="tableData" border style="width: 100%; height: 500px">
      <el-table-column prop="userCode" label="员工工号" width="150" />
      <el-table-column prop="userName" label="员工名称" width="150" />
      <el-table-column prop="planOrderCode" label="织布单号" width="150" />
      <el-table-column prop="shift" label="班次" width="300" />
      <el-table-column prop="greyCode" label="坯布编号" width="150" />
      <el-table-column prop="greyName" label="坯布名称" width="150" />
      <el-table-column prop="machine" label="机台号" width="150" />
      <el-table-column prop="billDate" label="验布日期" width="150" />
      <el-table-column prop="checkWeight" label="值机重量" width="150" />
      <el-table-column prop="fabricWeight" label="个人次布重量" width="150" />
      <el-table-column prop="posteriorWeight" label="个人验后重量" width="150" />
      <el-table-column prop="weaverPrice" label="单价" width="150" />
      <el-table-column prop="weaverMoney" label="个人值机金额" width="150" />

      <el-table-column prop="subsidyPrice" label="补贴单价" width="150">
        <template #default="scope">
          <a-input-number v-model="scope.row.subsidyPrice" @change="subsidyPriceChange(scope)" class="input-demo bacClass"
            :min="0" :precision="2" />
        </template>
      </el-table-column>
      <el-table-column prop="subsidyMoney" label="补贴金额" width="150" />
      <el-table-column prop="zje" label="总金额" width="150">
        <template #default="scope">
          {{ scope.row.subsidyMoney + scope.row.weaverMoney }}
        </template>
      </el-table-column>
    </el-table> -->
    <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
      @grid-ready="gridReady888" style="height:60vh;" :defaultColDef="defaultColDef" class="ag-theme-alpine"
      :rowData="tableData" :columnDefs="tc888" :localeText="localeText1"></AgGridVuesCopys>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post, get } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'
import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'

const headerShow = ref(true)

const tabIds = ref(1)

const tabChanges = (val: any) => {
  tabIds.value = val
  if (val == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
}

const pagingList1: any = ref(pagingList)
const localeText1: any = ref(localeText)

const defaultColDef: any = {
  sortable: true,
  resizable: true,
  filter: true,
}
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}

const gridOption2 = ref()
const gridReady2 = (params: any) => {
  gridOption2.value = params.api
}

const gridOption888 = ref()
const gridReady888 = (params: any) => {
  gridOption888.value = params.api
}

const total = ref(0)
const page = ref(1)
const size = ref(10)
function PageSize(val: any) {
  page.value = val
  if (tabIds.value == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
}
function change1(val: any) {
  size.value = val
  if (tabIds.value == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
}

const dataList: any = ref([])
const dataList2: any = ref([])

function doRefresh() {
  form.pageLoading = true
  post({
    url: 'planSingle/planOrder/getPageInfo',
    data: {
      page: page.value,
      size: size.value,
      planOrderCode: form.planOrderCode,
      customOrderNo: form.customOrderNo,
      customName: form.customName,
      schedulState: 3,
      subsidyState: 0,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        dataList.value = data.list
        gridOption.value.setRowData(data.list)
        total.value = data.total
      }
    })
    .catch(console.log)
    .finally(() => {
      form.pageLoading = false
    })
}

function doRefresh2() {
  form.pageLoading = true
  post({
    url: 'planSingle/planOrder/getPageInfo',
    data: {
      page: page.value,
      size: size.value,
      planOrderCode: form.planOrderCode,
      customOrderNo: form.customOrderNo,
      customName: form.customName,
      schedulState: 3,
      subsidyState: 1,
    },
  })
    .then(({ data, code }: any) => {
      if (code === 200) {
        dataList2.value = data.list
        gridOption2.value.setRowData(data.list)
        total.value = data.total
      }
    })
    .catch(console.log)
    .finally(() => {
      form.pageLoading = false
    })
}

const cx = () => {
  page.value = 1
  if (tabIds.value == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
}

onMounted(() => {
  pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight
  }
  if (tabIds.value == 1) {
    doRefresh()
  } else {
    doRefresh2()
  }
})
const pageData = reactive({
  showAdd: false,
  rHeight: 0,
  sideTitle: '新增',
})

const tableColumns = [
  {
    title: '公司',
    key: 'outSouringCompany',
    dataIndex: 'outSouringCompany',
    width: 150,
  },
  {
    title: '客户',
    key: 'customName',
    dataIndex: 'customName',
    width: 150,
  },
  {
    title: '织布单号',
    key: 'planOrderCode',
    dataIndex: 'planOrderCode',
    width: 150,
  },
  {
    title: '客户订单号',
    key: 'customOrderNo',
    dataIndex: 'customOrderNo',
    width: 150,
  },
  {
    title: '坯布编号',
    key: 'greyCode',
    dataIndex: 'greyCode',
    width: 150,
  },
  {
    title: '坯布名称',
    key: 'greyName',
    dataIndex: 'greyName',
    width: 150,
  },
  {
    title: '坯布批号',
    key: 'greyBatchNo',
    dataIndex: 'greyBatchNo',
    width: 150,
  },
  {
    title: '指令重量',
    key: 'orderWeight',
    dataIndex: 'orderWeight',
    width: 150,
  },
  {
    title: '单价',
    key: 'price',
    dataIndex: 'price',
    width: 150,
  },
  {
    title: '匹数',
    key: 'pieceNum',
    dataIndex: 'pieceNum',
    width: 150,
  },
  {
    title: '金额',
    key: 'amount',
    dataIndex: 'amount',
    width: 150,
  },
  {
    title: '抽针',
    key: 'drawnNeedleState',
    dataIndex: 'drawnNeedleState',
    slotName: 'drawnNeedleState',
    width: 150,
  },
  {
    title: '是否开幅',
    key: 'type',
    dataIndex: 'type',
    slotName: 'type',
    width: 150,
  },
  {
    title: '完成产量',
    key: 'posteriorWeight',
    dataIndex: 'posteriorWeight',
    width: 150,
  },
  {
    title: '开单人',
    key: 'tabulationPerson',
    dataIndex: 'tabulationPerson',
    width: 150,
  },
  {
    title: '开单日期',
    key: 'planDate',
    dataIndex: 'planDate',
    width: 150,
  },
  {
    title: '审核人',
    key: 'auditPerson',
    dataIndex: 'auditPerson',
    width: 150,
  },
]

let tc: any[] = tableColumns.map((o) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
  }
  if (o.slotName === 'drawnNeedleState') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    // obj["lockPosition"] = "right"
    obj['cellRenderer'] = {
      template: `<div style="width: 100%;">{{val}}</div>`,
      setup(props: any) {
        let val = ref()
        val.value = props.params.data.drawnNeedleState == 1 ? '抽针' : '圆筒'
        return {
          val,
        }
      },
    }
  }
  if (o.slotName === 'type') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == 0
          ? '开幅'
          : params.value == 1
            ? '不开幅'
            : params.value == '开幅'
              ? '开幅'
              : params.value == '不开幅'
                ? '不开幅'
                : ''
      },
    }
    obj['sortable'] = false
    // obj["lockPosition"] = "right"
    obj['cellRenderer'] = {
      template: `<div style="width: 100%;">{{val}}</div>`,
      setup(props: any) {
        let val = ref()
        //   val.value = props.params.data.type == 0 ? '不开幅' : '开幅'
        if (props.params.data.type == 0) {
          val.value = '不开幅'
        } else if (props.params.data.type == 1) {
          val.value = '开幅'
        } else if (props.params.data.type == '不开幅') {
          val.value = '不开幅'
        } else if (props.params.data.type == '开幅') {
          val.value = '开幅'
        }
        return {
          val,
        }
      },
    }
  }
  return obj
})

const tableColumns2 = [
  {
    title: '公司',
    key: 'outSouringCompany',
    dataIndex: 'outSouringCompany',
    width: 150,
  },
  {
    title: '客户',
    key: 'customName',
    dataIndex: 'customName',
    width: 150,
  },
  {
    title: '织布单号',
    key: 'planOrderCode',
    dataIndex: 'planOrderCode',
    width: 150,
  },
  {
    title: '客户订单号',
    key: 'customOrderNo',
    dataIndex: 'customOrderNo',
    width: 150,
  },
  {
    title: '坯布编号',
    key: 'greyCode',
    dataIndex: 'greyCode',
    width: 150,
  },
  {
    title: '坯布名称',
    key: 'greyName',
    dataIndex: 'greyName',
    width: 150,
  },
  {
    title: '坯布批号',
    key: 'greyBatchNo',
    dataIndex: 'greyBatchNo',
    width: 150,
  },
  {
    title: '指令重量',
    key: 'orderWeight',
    dataIndex: 'orderWeight',
    width: 150,
  },
  {
    title: '单价',
    key: 'price',
    dataIndex: 'price',
    width: 150,
  },
  {
    title: '匹数',
    key: 'pieceNum',
    dataIndex: 'pieceNum',
    width: 150,
  },
  {
    title: '金额',
    key: 'amount',
    dataIndex: 'amount',
    width: 150,
  },
  {
    title: '抽针',
    key: 'drawnNeedleState',
    dataIndex: 'drawnNeedleState',
    slotName: 'drawnNeedleState',
    width: 150,
  },
  {
    title: '是否开幅',
    key: 'type',
    dataIndex: 'type',
    slotName: 'type',
    width: 150,
  },
  {
    title: '完成产量',
    key: 'posteriorWeight',
    dataIndex: 'posteriorWeight',
    width: 150,
  },
  {
    title: '开单人',
    key: 'tabulationPerson',
    dataIndex: 'tabulationPerson',
    width: 150,
  },
  {
    title: '开单日期',
    key: 'planDate',
    dataIndex: 'planDate',
    width: 150,
  },
  {
    title: '审核人',
    key: 'auditPerson',
    dataIndex: 'auditPerson',
    width: 150,
  },
  {
    title: '操作',
    key: 'id',
    dataIndex: 'id',
    slotName: 'action',
    width: 150,
    fixed: 'right',
  },
]

let tc2: any[] = tableColumns2.map((o) => {
  let obj = {
    headerName: o.title,
    field: o.key,
    pinned: o['fixed'],
  }
  if (o.slotName === 'drawnNeedleState') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    // obj["lockPosition"] = "right"
    obj['cellRenderer'] = {
      template: `<div style="width: 100%;">{{val}}</div>`,
      setup(props: any) {
        let val = ref()
        val.value = props.params.data.drawnNeedleState == 1 ? '抽针' : '圆筒'
        return {
          val,
        }
      },
    }
  }
  if (o.slotName === 'type') {
    obj['resizable'] = false
    obj['filter'] = true
    obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == 0
          ? '开幅'
          : params.value == 1
            ? '不开幅'
            : params.value == '开幅'
              ? '开幅'
              : params.value == '不开幅'
                ? '不开幅'
                : ''
      },
    }
    obj['sortable'] = false
    // obj["lockPosition"] = "right"
    obj['cellRenderer'] = {
      template: `<div style="width: 100%;">{{val}}</div>`,
      setup(props: any) {
        let val = ref()
        //   val.value = props.params.data.type == 0 ? '不开幅' : '开幅'
        if (props.params.data.type == 0) {
          val.value = '不开幅'
        } else if (props.params.data.type == 1) {
          val.value = '开幅'
        } else if (props.params.data.type == '不开幅') {
          val.value = '不开幅'
        } else if (props.params.data.type == '开幅') {
          val.value = '开幅'
        }
        return {
          val,
        }
      },
    }
  }
  if (o.slotName === 'action') {
    obj['resizable'] = false
    obj['filter'] = false
    obj['sortable'] = false
    obj['lockPosition'] = 'right'
    obj['width'] = 100
    obj['cellRenderer'] = {
      template: `<el-button style="color:#165dff;" link  @click="a1">修改</el-button>`,
      setup(props: any) {
        const a1 = () => {
          editHandler(props.params.data)
        }
        return {
          a1,
        }
      },
    }
  }
  return obj
})

let a = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
]
tc2 = a.concat(tc2)
tc = a.concat(tc)

let tc888 = [
  { headerName: '员工工号', field: 'userCode', width: 150 },
  { headerName: '员工名称', field: 'userName', width: 150 },
  { headerName: '织布单号', field: 'planOrderCode', width: 150 },
  { headerName: '班次', field: 'shift', width: 150 },
  { headerName: '坯布编号', field: 'greyCode', width: 150 },
  { headerName: '坯布名称', field: 'greyName', width: 150 },
  { headerName: '机台号', field: 'machine', width: 150 },
  // { headerName: '验布日期', field: 'billDate', width: 150 },
  { headerName: '值机重量', field: 'checkWeight', width: 150 },
  { headerName: '个人次布重量', field: 'fabricWeight', width: 150 },
  { headerName: '个人验后重量', field: 'posteriorWeight', width: 150 },
  { headerName: '单价', field: 'weaverPrice', width: 150 },
  { headerName: '个人值机金额', field: 'weaverMoney', width: 150 },
  {
    headerName: '补贴单价', field: 'subsidyPrice', width: 150, cellRenderer: {
      template: `<a-input-number v-model="vals.subsidyPrice" @change="a" class="input-demo bacClass"
            :min="0" :precision="2" />`,
      setup(props: any) {
        const vals = props.params.data
        const a = () => {
          subsidyPriceChange(props.params.data)
        }
        return {
          a,
          vals
        }
      },
    }
  },
  { headerName: '补贴金额', field: 'subsidyMoney', width: 150 },
  {
    headerName: '总金额', field: 'zje', width: 150, cellRenderer: {
      template: `<div>{{ zje }}</div>`,
      setup(props: any) {
        const subsidyMoney = Number(props.params.data.subsidyMoney)
        const weaverMoney = Number(props.params.data.weaverMoney)
        const zje = (subsidyMoney + weaverMoney).toFixed(2)
        return {
          subsidyMoney,
          weaverMoney,
          zje
        }
      },
    }
  },
]

const form: any = reactive({
  planOrderCode: '',
  customOrderNo: '',
  customName: '',
})

const adds = () => {
  if (gridOption.value.getSelectedRows().length != 1) {
    Message.error('请都选单条数据新增')
    return false
  }
  post({
    url: '/pieceData/dutymachineSalary/getCheckClothWageByPlanCode',
    data: {
      planOrderCode: gridOption.value.getSelectedRows()[0].planOrderCode,
    },
  }).then(({ code, data }) => {
    if (code == 200) {
      tableData.value = data
      pageData.showAdd = true
      pageData.sideTitle = '新增'
    }
  })
}

const sideOk = () => {
  if (pageData.sideTitle == '新增') {
    post({
      url: 'pieceData/planOrderSubsidy/insert',
      data: tableData.value.map((res: any) => {
        delete res.id
        return res
      }),
    }).then(({ code, message }) => {
      if (code == 200) {
        Message.success('成功')
        pageData.showAdd = false
        doRefresh()
      } else {
        Message.error(message)
      }
    })
  } else {
    post({
      url: 'pieceData/planOrderSubsidy/update',
      data: tableData.value,
    }).then(({ code, message }) => {
      if (code == 200) {
        Message.success('成功')
        pageData.showAdd = false
        doRefresh2()
      } else {
        Message.error(message)
      }
    })
  }
}

const tableData = ref([])

const subsidyPriceChange = (scope: any) => {
  
  var bb = scope.subsidyPrice
  // let tableDatas = JSON.parse(JSON.stringify(tableData.value))
  tableData.value.forEach((item: any) => {
    item['subsidyPrice'] = bb
    item.subsidyMoney = Number(item.posteriorWeight * item.subsidyPrice).toFixed(2)
  })
  // gridOption888.value.setRowData(tableDatas)
  setTimeout(() => {
    gridOption888.value.setRowData(tableData.value)
  }, 100)
}

const editHandler = (params: any) => {
  post({
    url: '/pieceData/dutymachineSalary/getCheckClothWageByPlanCode',
    data: {
      planOrderCode: params.planOrderCode,
    },
  }).then(({ code, data }) => {
    if (code == 200) {
      tableData.value = data
      pageData.showAdd = true
      pageData.sideTitle = '修改'
    }
  })
}
</script>
<style lang="less" scoped>
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
